import { Button, Space, Modal, Menu, MenuItem, Dropdown } from 'ant-design-vue';
import {
  ExclamationCircleOutlined,
  MenuOutlined,
  DatabaseOutlined,
  DownOutlined,
  DeleteOutlined
} from '@ant-design/icons-vue';
import { createVNode, defineComponent } from 'vue';
import { hasPermission } from '@/utils/permission';

export default defineComponent({
  props: {
    record: {
      type: Object,
      default: () => {
        return {};
      }
    },
    editCall: {
      type: Function,
      default: () => {}
    },
    deleteCall: {
      type: Function,
      default: () => {}
    }
  },
  emits: ['edit', 'delete', 'authRole', 'authData', 'resSetPwd'],
  setup(props, { emit }) {
    const handleEdit = (_arg: any) => {
      emit('edit', props.record);
    };
    const handleDelete = (_arg: any) => {
      Modal.confirm({
        title: '确定要删除数据？',
        centered: true,
        icon: createVNode(ExclamationCircleOutlined),
        onOk() {
          emit('delete', props.record);
        }
      });
    };
    const handleAuthRole = (_arg: any) => {
      emit('authRole', props.record);
    };
    const handleAuthData = (_arg: any) => {
      emit('authData', props.record);
    };
    const handleResetPwd = (_arg: any) => {
      emit('resSetPwd', props.record);
    };
    return {
      handleEdit,
      handleDelete,
      handleAuthRole,
      handleAuthData,
      handleResetPwd
    };
  },
  render() {
    return (
      <Space>
        <Button
          v-permission={'sysUser:update'}
          type="dashed"
          onClick={this.handleEdit}
        >
          编辑
        </Button>
        <Dropdown
          overlay={
            <Menu>
              <MenuItem
                key="1"
                icon={<MenuOutlined />}
                onClick={this.handleAuthRole}
              >
                授权角色
              </MenuItem>
              <MenuItem
                key="2"
                icon={<DatabaseOutlined />}
                onClick={this.handleAuthData}
              >
                授权数据
              </MenuItem>
              <MenuItem
                key="2"
                icon={<DatabaseOutlined />}
                onClick={this.handleResetPwd}
              >
                重置密码
              </MenuItem>
              <MenuItem
                key="3"
                danger
                icon={<DeleteOutlined />}
                disabled={!hasPermission('sysUser:delete')}
                onClick={this.handleDelete}
              >
                删除
              </MenuItem>
            </Menu>
          }
        >
          <Button type="dashed" icon={<DownOutlined />}>
            更多
          </Button>
        </Dropdown>
      </Space>
    );
  }
});
